/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  Image,
  ScrollView
} from 'react-native';
import Header from './src/components/header.js'
import News from './src/components/news.js'
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};

// export default class LessonImage extends Component{
//   render(){
//     return(
//       <View style={styles.container}>
//         <View style={styles.net}>
//           <Image 
//             style={styles.netImage}
//             source={{uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523611400503&di=b51db56efddc6ffe8ad2fed1c36e2d90&imgtype=0&src=http%3A%2F%2Fimg.tupianzj.com%2Fuploads%2Fallimg%2F170201%2F9-1F201211525.jpg'}}
//           />
//         </View>
//         <View style={styles.local}>
//           <Image
//             style={styles.localImage}
//             source={require('./public/ico.jpg')}
//           />
//         </View>
//       </View>
//     );
//   }
// }

// const styles = StyleSheet.create({
//   container:{
//     flex:1,
//     margin:25,
//     alignItems:'center'
//   },
//   net:{
//     marginTop:30,
//     width:300,
//     height:240,
//     justifyContent:'center',
//     alignItems:'center',
//     backgroundColor:'cyan'
//   },
//   netImage:{
//     width:280,
//     height:200,
//     backgroundColor:'gray'
//   },
//   local:{
//     marginTop:30,
//     width:300,
//     height:200,
//     justifyContent:'center',
//     alignItems:'center',
//     backgroundColor:'yellow'
//   },
//   localImage:{
//     width:180,
//     height:180,
//     backgroundColor:'gray'
//   }
// })

// export default class LessTouhable extends Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       text: 'Hello ReactNative',
//     };
//     this.clickBtn = this.clickBtn.bind(this); 
//   }
//   clickBtn(){
//     alert(this.state.text)
//   }
//   render() {
//     return (
//       <View style={styles.container}>
//         <View style={[styles.flex,styles.item]}>
//           <TextInput
//             style={styles.input}
//             returnKeyType="search"
//             placeholder="请输入内容"
//             onChangeText={(text) => this.setState({text})}
//             value={this.state.text}
//           />
//         </View>
//         <TouchableOpacity style={[styles.item,styles.btn]} onPress={this.clickBtn}>
//           <Text style={styles.search}>搜索</Text>
//         </TouchableOpacity>
//       </View >
//     );
//   }
// }

// const styles = StyleSheet.create({
//   container:{
//     flexDirection:'row',
//   },
//   flex:{
//     flex:1
//   },
//   input:{
//     borderColor:'#CCC',
//     height:45,
//     borderRadius:4,
//     borderWidth:1
//   },
//   item:{
//     height:45,
//     margin:5
//   },
//   btn:{
//     width:55,
//     marginLeft:5,
//     marginRight:5,
//     backgroundColor:"#23BEFF",
//     height:45,
//     justifyContent:'center',
//     alignItems:'center'
//   },
//   search:{
//     color:'#FFF',
//     fontSize:15,
//     fontWeight:'bold'
//   }
// })

// const styles = StyleSheet.create({
//   container: {

//     height: 45,
//     marginTop: 25,
//     backgroundColor:"#red"
//   },
//   flex: {
//     flex: 1,
//   },
//   input: {
//     height: 45,
//     borderWidth: 1,
//     marginLeft: 5,
//     paddingLeft: 5,
//     borderColor: '#CCC',
//     borderRadius: 4
//   },
//   btn: {
//     width: 55,
//     marginLeft: 5,
//     marginRight: 5,
//     backgroundColor: '#23BEFF',
//     height: 45,
//     justifyContent: 'center',
//     alignItems: 'center',
//   },
//   search: {
//     color: '#FFF',
//     fontSize: 15,
//     fontWeight: 'bold',
//   }
// })

// export default class LessonText extends Component{
//   render(){
//     let news=[
//       '1.黄炳誓被免去朝鲜国务委员会副委员长职务,黄炳誓被免去朝鲜国务委员会副委员长职务',
//       '2.外交部回应叙利亚局势:呼吁有关方保持冷静克制,外交部回应叙利亚局势:呼吁有关方保持冷静克制',
//       '3.军工龙头“中国重工”大涨，主力300亿天量成交!军工龙头“中国重工”大涨，主力300亿天量成交!'
//     ];
//     return(
//       <View style={styles.flex}>
//         <Header></Header>
//         <News news={news}></News>
//       </View>
//     );
//   }
// }

// const styles = StyleSheet.create({
//   flex:{
//     flex:1,
//   },
// })

// export default class LessonView extends Component {
//   render() {
//     return (
//       <View style={[styles.flex, styles.container]}>
//         <View style={styles.item}>
//           <View style={[styles.flex, styles.center]}>
//             <Text>酒店</Text>
//           </View>
//           <View style={[styles.flex, styles.lineLeftRight]}>
//             <View style={[styles.flex, styles.center, styles.lineCenter]}>
//               <Text>海外酒店</Text>
//             </View>
//             <View style={[styles.flex, styles.center]}>
//               <Text>特价酒店</Text>
//             </View>
//           </View>
//           <View style={styles.flex}>
//             <View style={[styles.flex, styles.center, styles.lineCenter]}>
//               <Text>团购</Text>
//             </View>
//             <View style={[styles.flex, styles.center]}>
//               <Text>民宿.客栈</Text>
//             </View>
//           </View>
//         </View>

//       </View>
//     );
//   }
// }

// const styles = StyleSheet.create({
//   container: {
//     marginTop: 25,
//     backgroundColor: '#F2F2F2',
//   },
//   flex: {
//     flex: 1,
//   },
//   center: {
//     justifyContent: 'center',
//     alignItems: 'center',
//   },
//   item: {
//     flexDirection: 'row',
//     backgroundColor: '#FF607C',
//     marginTop: 5,
//     marginLeft: 5,
//     marginRight: 5,
//     height: 80,
//     borderRadius: 5
//   },
//   lineLeftRight: {
//     borderLeftWidth: 1,
//     borderRightWidth: 1,
//     borderColor: 'white'
//   },
//   lineCenter: {
//     borderBottomWidth: 1,
//     borderColor: 'white'
//   }
// });

// export default class App extends Component<Props> {
//   render() {
//     return (
//       <View style={styles.container}>
//         <View style={styles.top}>
//           <View style={styles.bottom}>
//           </View>
//         </View>
//       </View>
//     );
//   }
// }

// const styles = StyleSheet.create({
//   container: {
//     marginTop: 25,
//     marginLeft: 30,
//     backgroundColor: "red",
//     width: 300,
//     height: 400,
//   },
//   top: {
//     backgroundColor: "green",
//     width: 280,
//     height: 250,
//     margin: 10,
//     borderWidth:3,
//     borderColor:"black"
//   },
//   bottom: {
//     backgroundColor: "yellow",
//     width: 280,
//     height: 110,
//     borderWidth:3,
//     borderColor:"black",
//   },
// });

// export default class LessonFlex extends Component{
//   render(){
//     return(
//       <View style={styles.container}>
//         <View style={styles.child1}>
//         </View>
//         <View style={styles.child2}>
//         </View>
//       </View>
//     );
//   }
// }

// const styles = StyleSheet.create({
//   container:{
//     margin: 30,
//     width:300,
//     height:500,
//     backgroundColor: 'yellow',
//     flexDirection: 'row',
//     justifyContent:'center',
//     alignItems:'flex-end',
//   },
//   child1:{
//     width:100,
//     height:100,
//     backgroundColor:'green',
//   },
//   child2:{
//     width:100,
//     height:100,
//     backgroundColor:'blue',
//   }
// })

// const styles = StyleSheet.create({
//   container:{
//     marginTop:30,
//     flex:1,
//     backgroundColor: 'cyan',
//   },
//   child1:{
//     flex:1,
//     backgroundColor:"green",
//   },
//   child2:{
//     flex:1,
//     backgroundColor:'yellow'
//   }
// })


